<template>
	<view class="container">
		<!-- 内容区域 -->
		<view class="content">
			<view class="shop-list">
				<view class="item-box" v-for="(item, index) in cartItems" :key="index">
					<view class="item">
						<view class="check-around-box">
							<checkbox-group @change="selected(item)">
								<label>
									<checkbox style="transform: scale(0.7)" class="selected" color="#555555" :checked="item.checked" /><text></text>
								</label>
							</checkbox-group>
						</view>

						<view class="item-img-box">
							<image :src="item.imageSrc" mode=""></image>
						</view>
						<view class="item-info-box">
							<view class="item-title">{{ item.title }}</view>
							<view class="item-spec">{{ item.info }}</view>
							<view class="item-price">{{ item.price }}</view>
						</view>

						<view class="num-box">
							<view class="num-desc" @click="decreaseQuantity(index)">-</view>
							<text class="num">{{ item.quantity }}</text>
							<view class="num-plus" @click="increaseQuantity(index)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部区域 -->
		<view class="footer">
			<!-- 这里设置底部高度和背景颜色 -->
			<view class="end-left">
				<checkbox-group @change="selectAllItems">
					<label>
						<checkbox style="transform: scale(0.7)" :checked="allchecked" />全选
					</label>
				</checkbox-group>
				<view>总价：{{totalPrice}}</view>
			</view>
			<view class="end-right" @click="settleAccounts">
				结算
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartItems: [],
				allchecked: false
			};
		},
		mounted() {
			this.generateCartItems();
		},

		computed: {
			totalPrice() {
				const selectedItems = this.cartItems.filter((item) => item.checked);
				return selectedItems.reduce((total, item) => total + (item.quantity * parseFloat(item.price.substring(1))),
					0);
			},
		},
		methods: {
			/**
			 * 单选
			 */
			selected(item) {
				console.log('单选', item);
				item.checked = !item.checked; 
				// 检查是否全部为true ，如果是，则全选为true，否则为false
				this.allchecked = this.cartItems.every((item) => item.checked);
			},
			/**
			 * 全选
			 */
			selectAllItems() {
				this.allchecked = !this.allchecked;
				this.cartItems.forEach((item) => {
					item.checked = this.allchecked;
				});
				console.log('全选');
			},
			/**
			 * 结算
			 */
			settleAccounts() {
				const selectedItems = this.cartItems.filter((item) => item.checked);
				console.log('结算', selectedItems);
			},
			generateCartItems() {
				for (let i = 1; i <= 15; i++) {
					this.cartItems.push({
						imageSrc: `../../static/logo.png`,
						title: `商品${i}`,
						info: `商品信息${i}`,
						price: `￥20`,
						quantity: 1,
						checked: false, // Initialize checked property
					});
				}
			},
			/**
			 * @param {Object} index
			 * 减
			 */
			decreaseQuantity(index) {
				this.cartItems[index].quantity--;
				if (this.cartItems[index].quantity <= 1) {
					this.cartItems[index].quantity = 1;
				}
			},
			/**
			 * @param {Object} index
			 * 加
			 */
			increaseQuantity(index) {
				this.cartItems[index].quantity++;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;

	}


	.content {
		flex: 1;
		background-color: #ffffff;
		padding: 20rpx;
		overflow-y: auto;

		/* 隐藏滚动条 */
		&::-webkit-scrollbar {
			width: 0;
		}

		/* 隐藏滚动条轨道 */
		&::-webkit-scrollbar-track {
			background-color: transparent;
		}

		/* 隐藏滚动条滑块 */
		&::-webkit-scrollbar-thumb {
			background-color: transparent;
		}

		.shop-list {
			flex: 1;

			.item-box {
				border-bottom: 5rpx solid #F1F1F1;

				.item {
					height: 150rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.item-img-box {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.num-box {
						width: 100rpx;
						display: flex;
					}
				}
			}
		}
	}

	/* 底部区域 */
	.footer {
		height: 50rpx;
		display: flex;

		.end-left {
			padding: 0 10rpx;
			width: 70%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.end-right {
			width: 30%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>